<template>
   <wxc-mask height="320"
              width="520"
              border-radius="20"
              duration="1000"
              mask-bg-color="#FFFFFF"
              :has-animation="hasAnimation"
              :has-overlay="true"
              :show="show"
              >
      <div class="content">
        <text class="title">请确认用户密码</text>
        <div class="login-input">
        <input  type="password" :color='inputText.color' :placeholder="$t('wallet.pw')" class="login-input-inner" @input="get_pw_val" />
      </div>
      <div class="operate">
        <wxc-button text="取消"
              :btnStyle="{width:'260px',height:'80px',borderWidth:0,backgroundColor:'#FFFFFF'}"
              :textStyle="{color:'rgba(70,120,245,1)','font-size':'24px','text-align':'center'}"
              @wxcButtonClicked="wxcMaskSetHidden">
        </wxc-button>
          <div class="border-m"></div>
           <wxc-button text="确定"
              :btnStyle="{width:'260px',height:'80px',borderWidth:0,backgroundColor:'#FFFFFF'}"
              :textStyle="{color:'rgba(70,120,245,1)','font-size':'24px','text-align':'center'}"
              @wxcButtonClicked="sure_pw">
              </wxc-button>
      </div>
      </div>
    </wxc-mask>
</template>

<script>
import { WxcMask,WxcButton } from 'weex-ui';
export default {
  name: '',
  data() {
    return {
       password:'',
      show: false,
      hasAnimation: false
    }
  },
  components: {WxcMask,WxcButton},
  methods: {
    openMask (e) {
        this.show = true;
        this.hasAnimation = true;
      },
    wxcMaskSetHidden () {
      this.show = false;
    },
    get_pw_val(e){
      if(e.value.length<8)return
      this.password = e.value
    },
    sure_pw(){
        if(!this.password) return this.toast('请输入密码')
        if(this.current_user.pw !== this.password) return this.toast('密码输入错误！')
        this.show = false
        this.$emit('success')
    },
  }
}
</script>
<style scoped>
.content{
  display: flex;
  flex-direction: column;
}
.title{
  margin-top: 60px;
  margin-left: 36px;
  color: rgba(60,71,98,1);
  font-size: 30px;
}
.login-input{
  width: 448px;
  margin-left: 36px;
  margin-top: 40px;
  height: 90px;
  border-bottom-width: 1px;
  border-bottom-color: rgba(233,233,233,1);
  border-bottom-style: solid;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.login-input-inner{
  width: 620px;
  font-size: 28px;
  height: 90px;
}
.operate{
  display: flex;
  flex-direction: row;
  height: 90px;
  width: 520px;
  align-items: center;
}
.border-m{
  height: 80px;
  width: 1px;
  background-color: rgba(233,233,233,1);
}
</style>